<template>
  <div class="body">
    <!-- 定位 -->
    <div class="top">
      <a href="">
        <span>
          <svg t="1683601194755" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="3181" width="30" height="30">
            <path
              d="M511.954463 250.971985c-73.709769 0-133.669372 58.877969-133.669372 131.23288 0 72.339562 59.959603 131.157155 133.669372 131.157155 73.707722 0 133.639696-58.817594 133.639696-131.157155C645.594159 309.84893 585.662185 250.971985 511.954463 250.971985M511.954463 455.252555c-40.97625 0-74.311473-32.779567-74.311473-73.078389 0-40.284495 33.334199-73.077366 74.311473-73.077366 40.945551 0 74.278727 32.79287 74.278727 73.077366C586.23319 422.472987 552.900014 455.252555 511.954463 455.252555"
              fill="#231F20" p-id="3182"></path>
            <path
              d="M824.811914 401.684522c0-169.441087-140.347468-307.277362-312.857451-307.277362-172.479283 0-312.768423 137.836275-312.768423 307.277362 0 132.88552 192.606693 400.645866 275.461749 509.584997 8.724709 11.492752 22.683628 18.321274 37.305651 18.321274 14.5903 0 28.580942-6.828522 37.334303-18.321274C632.11517 802.331411 824.811914 534.602787 824.811914 401.684522M516.887822 864.759229l-4.933359 6.557346-4.934382-6.557346C350.606705 656.92881 253.370103 479.470119 253.370103 401.684522c0-140.062989 115.979478-254.012228 258.58436-254.012228 142.575206 0 258.552637 113.949238 258.552637 254.012228C770.537799 479.499795 673.36055 656.92881 516.887822 864.759229"
              fill="#231F20" p-id="3183"></path>
          </svg>
        </span>
        <span>
          四川科技职业学院
        </span>
      </a>
    </div>
    <!-- 搜索框 -->
    <div class="search">
      <div class="main">
        <span>
          <img src="../IMG/搜索框放大镜.png" alt="">
        </span>
        <input type="text" placeholder="搜索附近医院">
      </div>
    </div>
    <!-- 一 -->
    <div class="fi">
      <ul class="flex">
        <li>全国连锁运营</li>
        <li>新瑞鹏旗下</li>
        <li>专业权威保障</li>
      </ul>
      <div class="flex">
        <div class="fi-main">
          <h3>互联网医院</h3>
          <p>数千名宠物医生入住</p>
        </div>
        <div class="fi-main">
          <h3>宠物知识</h3>
          <p>专家医师在线解答</p>
        </div>
      </div>
    </div>
    <!-- 二 -->
    <div class="se">
      <div class="se-t">
        <h3>专科医院</h3>
        <span>小病更迅速</span>
        <span>附近就有0家医院</span>
        <span></span>
        <ul class="flex">
          <li>
            <a href="">
              <img src="" alt="">
              内科
            </a>
          </li>
          <li>
            <a href="">
              <img src="" alt="">
              皮肤科
            </a>
          </li>
          <li>
            <a href="">
              <img src="" alt="">
              猫科
            </a>
          </li>
          <li>
            <a href="">
              <img src="" alt="">
              肿瘤科
            </a>
          </li>
        </ul>
      </div>
      <div class="se-b">
        <h3>中心医院</h3>
        <span>大病更权威</span>
        <span>有10家可以选择</span>
      </div>
    </div>
    <!-- 三 -->
    <div class="th">
      <div class="th-t"></div>
      <div class="th-b"></div>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

a,
ul,
li {
  text-decoration: none;
  color: #555;
  list-style: none;
  /* display: inline-block; */
}

.body {
  font-size: 0.85rem;
  background-color: #F8F8F8;
}

.flex {
  display: flex;
}

/* 定位 */
.top {
  height: 3rem;
  padding-top: 5%;
  padding-left: 1%;
  font-size: 0.2rem;
  /* background-color: coral; */
}

.top a span:first-child {
  vertical-align: -0.65rem;
}

/* 搜索框 */
.search {
  /* background-color: pink; */
  height: 3rem;
}

.search .main {
  background-color: #DADADA;
  width: 95%;
  height: 2.5rem;
  border-radius: 2rem;
  margin: auto;
}

.search span {
  margin: 0 0.2rem 0 1rem;
  vertical-align: -0.5rem;
}

.search input {
  width: 75%;
  height: 2.5rem;
  border: none;
  outline: none;
  background-color: #DADADA;
  font-size: 0.1rem;
}

/* 一 */
.fi {
  /* background-color: cyan; */
  height: 15rem;
}

.fi ul {
  justify-content: space-around;
}

.fi ul li {
  width: 30%;
  height: 2rem;
  text-align: center;
  margin: 2rem 0 2rem 0;
  color: #AEAEAE;
}

.fi div {
  justify-content: space-evenly;
}

.fi-main {
  width: 41.5%;
  border-radius: 1rem;
  height: 6rem;
}

.fi-main h3,
p {
  margin: 1rem 0 0 1rem;
}

.fi-main:nth-child(1) {
  background-color: #D2F7EF;
}

.fi-main:nth-child(1) p {
  font-size: 0.5rem;
  color: #4AA999;
}

.fi-main:nth-child(2) {
  background-color: #A9E5FD;
}

.fi-main:nth-child(2) p {
  font-size: 0.5rem;
  color: #1EAAE0;
}

/* 二 */
.se {
  background-color: palegreen;
  height: 20rem;
}

.se-t {
  width: 90%;
  height: 9rem;
  background-color: #FFFFFF;
  margin: 0 auto;
  border-radius: 1rem;
}

.se-t ul {
  justify-content: space-evenly;
}

.se h3 {
  display: inline-block;
  margin: 0.85rem 0.85rem 0.85rem 0.2rem;
}

.se span {
  font-size: 0.5rem;
}

.se span:nth-child(2n) {
  color: #49AA99;
}

.se span:nth-child(2n-1) {
  color: #B4B4B4;
}

.se-b {
  width: 90%;
  height: 9rem;
  background-color: #FFFFFF;
  margin: 1rem auto;
  border-radius: 1rem;
}

/* 三 */
.th {
  background-color: sandybrown;
  height: 7rem;
}
</style>